import { GuidesDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Icons);

# Icons libraries with Mantine

You can use any icons library with Mantine components, most popular options are:

- [Tabler icons](https://tabler-icons.io/)
- [Feather icons](https://feathericons.com/)
- [Radix icons](https://icons.radix-ui.com/)
- [react-icons](https://react-icons.github.io/react-icons/)
- [Font Awesome](https://fontawesome.com/v5/docs/web/use-with/react)

## Tabler icons

[Tabler icons](https://tabler-icons.io/) are used in Mantine demos, documentation
and some `@mantine/` packages depend on them. If you do not know which icons library
to use, we recommend [Tabler icons](https://tabler-icons.io/).

## Icons size

Most of the icons libraries support `size` prop (or similar `width` and `height` props) which allows changing
icon width and height. Usually, it is a number in pixels. All Mantine components use [rem](/styles/rem)
units – components are scaled based on user preferences and `font-size` of the root element. If you want to
support this feature in your application, set icon width and height in [rem](/styles/rem) units with `style` prop.

<Demo data={GuidesDemos.icon} />

> **rem units in size prop**
>
> Icons `size` prop is usually converted to `width` and `height` props under the hood.
> If you set `size={16}` it will be converted to `width="16"` and `height="16"` attributes
> on svg element.
>
> You can use rem units in `size` prop: `size="1rem"` will be converted to `width="1rem"` and `height="1rem"`,
> but it is not recommended as it is prohibited by SVG standard – some browsers (Firefox) will show a warning in the console.

## Custom icons

It is recommended to use icons as React components. In this case, you will be able to use
`currentColor` in the `fill` and `stroke` prop. This will change icon color based on the context
it is used in.

<Demo data={GuidesDemos.customIcon} />
